<template>
    <div>
        <Row type="flex" justify="center">
            <Col span="18" id="index-carouse">
<!--                <Carousel autoplay v-model="value1" loop>-->
<!--                    <CarouselItem v-for="i in banners" :key="i.id">-->
<!--                        -->
<!--                    </CarouselItem>-->

<!--                </Carousel>-->

                <el-carousel trigger="click" height="350px">
                    <el-carousel-item v-for="i in banners" :key="i.id">
                        <div>
                            <a :href="i.href">
                                <img :src="i.pic" class="banner-img" />
                            </a>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </Col>
            <Col span="6" >
                <div v-for="i in bannerMinis" :key="i.id" class="mini-img" :id="'mini' + i.id">
                    <a :href="i.href">
                        <img :src="i.pic" class="banner-right-img" />
                    </a>
                </div>
            </Col>
        </Row>

    </div>
</template>

<script>
    export default {
        name: "banner",
        data() {
            return {
                value1: 0,
                banners: [
                    {id: 1 , title: "banner1", pic: require("../../assets/banner/banner1.jpg"), href:"/"},
                    {id: 2 , title: "banner2", pic: require("../../assets/banner/banner2.jpg"), href:"/"},
                    {id: 3 , title: "banner3", pic: require("../../assets/banner/banner3.jpg"), href:"/"}
                ],
                bannerMinis: [
                    {id:1, title: "mini1", pic: require("../../assets/banner/banner-right1.jpg"), href: "/"},
                    {id:2, title: "mini2", pic: require("../../assets/banner/banner-right2.jpg"), href: "/"},
                ]
            }
        }
    }
</script>

<style scoped>

    .banner-img{
        height: 100%;
        width: 100%;
        border-radius: 10px 10px;
    }

    .banner-right-img {
        height: 170px;
        width: 100%;
        border-radius: 5px 5px;
    }

    .banner-right-img:hover {
        transform: scale(1.03);
        transition: .9s
    }

    /deep/ .el-carousel {
        border-radius: 10px 10px;
    }

    #mini1 {
        margin-bottom: 5px;
    }

    .mini-img {
        overflow: hidden;
        border-radius: 5px 5px;
        /*width: 90%;*/
    }

    #index-carouse {
        padding-right: 10px;
    }

</style>